<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 不唠叨的章鱼
  Date: 2023/12/19
  Time: 2:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<style type="text/css">

    .title{
        width:100%; height: 40px;
    }
    .sysmenu{
        width:100%; height: 40px;
        border-bottom: #0086F6 1px solid;
        background: #0086F6;
    }
    .sysmenu a{
        color:#fff;
    }

    .sysmenu span{
        color:#fff;
    }
    #table-1{
        width:85%;
        margin-top:10px;
    }
    .s1{
        font-size: 16px;
        font-weight: 400;
        color:#575757;
    }
    .editbox{
        background: #ffffff;
        border: 1px solid #b7b7b7;
        color: #003366;
        cursor: text;
        font-family: "arial";
        font-size: 11pt;
        width:400px;
        height: 24px;
        padding: 3px;
        border-radius: 5px 5px 5px 5px;
        margin-top:2px;
        margin-bottom:2px;
        padding:3px;
    }

    .textarea{
        background: #ffffff;
        border: 1px solid #b7b7b7;
        color: #003366;
        cursor: text;
        font-family: "arial";
        font-size: 11pt;
        width:400px;
        height: 48px;
        resize:none;
        padding: 3px;
        border-radius: 5px 5px 5px 5px;
        margin-top:2px;
        margin-bottom:2px;
        padding:3px;
    }
    .editbox2{
        background: #ffffff;
        border: 1px solid #b7b7b7;
        color: #003366;
        cursor: text;
        font-family: "arial";
        font-size: 11pt;
        width:300px;
        height: 24px;
        padding: 3px;
        border-radius: 5px 5px 5px 5px;
    }

    .editbox3{
        background: #ffffff;
        border: 1px solid #b7b7b7;
        color: #003366;
        cursor: text;
        font-family: "arial";
        font-size: 11pt;
        width:400px;
        height: 30px;
        padding: 3px;
        border-radius: 5px 5px 5px 5px;
        margin-top:4px;
        margin-bottom:4px;
        padding:3px;
    }

    .bluebuttoncss {
        font-family: "tahoma", "宋体"; /*www.52css.com*/
        font-size: 11pt; color: #ffffff;
        border: 0px #93bee2 solid;
        background-color:#66B3FF;
        cursor: hand;
        font-style: normal ;
        width:80px;
        height:30px;
        border-radius: 5px 5px 5px 5px;
    }

    .whitebuttoncss {
        font-family: "tahoma", "宋体"; /*www.52css.com*/
        font-size: 11pt;
        color:#999999;
        border: 0px #93bee2 solid;
        background-color:#ffffff;
        cursor: hand;
        font-style: normal ;
        width:80px;
        height:30px;
        border-radius: 5px 5px 5px 5px;
    }

    .greenbuttoncss {
        font-family: "tahoma", "宋体"; /*www.52css.com*/
        font-size: 11pt; color: #ffffff;
        border: 0px #93bee2 solid;
        background-color:#009393;
        cursor: hand;
        font-style: normal ;
        width:80px;
        height:30px;
        border-radius: 5px 5px 5px 5px;
    }
    .topic{
        margin-left:100px;
        margin-top:10px;
        width:120px;
        height:40px;
        border: #8e8883 solid 1px;
        border-radius: 5px;
        color: #000000;
        font-family: "tahoma", "宋体"; /*www.52css.com*/
        font-size: 20pt;
        padding:20px 20px;
    }
</style>
<body>
<div style="float:left;" class="topic">
    <c:if test="${tDrug.drugid==0}">
        商品添加
    </c:if>
    <c:if test="${tDrug.drugid>0}">
        商品编辑
    </c:if>
</div>
<div style="clear:both"></div>
<div style="margin-top:10px;width:85%;min-width: 800px;border:0.5px solid #CCC"></div>

<form action="savedrug.do?drugid=${tDrug.drugid}" method="post">
    <table id="table-1" style="margin-left: 20px">
        <tbody>
        <tr>
            <td style="width:45%;">
                <table style="width:100%;">
                    <tr>
                        <c:if test="${tDrug.drugid==0}">
                            <td><img id="upload" width="450px" height="300px" src  ="img/无酒店背景.png"></td>
                        </c:if>

                        <c:if test="${tDrug.drugid>0}">
                            <td><img  id="upload" width="450px" height="300px" src="/upload/${tDrug.img}"></td>

                        </c:if>
                    </tr>
                    <tr>
                        <td>
                            <input id="photorul" class="editbox2" type="text" name="img" value="${tDrug.img}" readonly="readonly">
                            <input class="greenbuttoncss" type="button" value="选择图片" id="choicePhoto">
                            <!-- 隐藏file标签 -->
                            <input id="fileToUpload" style="display:none" type="file" name="upfile"/>
                        </td>
                    </tr>
                </table>
            </td>

            <td>
                <table  width="100%" height="300px">
                    <tr>
                        <td class="s1" style="width:120px">用户ID</td>
                        <td><input class="editbox" type="text" name="userid" value="${tDrug.userid}"  readonly="readonly"
                                   style="background-color:lightgray"></td>
                    </tr>

                    <tr>
                        <td class="s1" >药品名称</td>
                        <td><input class="editbox" type="text" name="name" value="${tDrug.name}" ></td>
                    </tr>

                    <tr>
                        <td class="s1" >药品类别</td>
                        <td><input class="editbox" type="text" name="drugclass" value="${tDrug.drugclass}" ></td>
                    </tr>

                    <tr>
                        <td class="s1" >治疗类别</td>
                        <td><input class="editbox" type="text" name="cureclass" value="${tDrug.cureclass}" ></td>
                    </tr>

                    <tr>
                        <td class="s1" >药品规格</td>
                        <td><input class="editbox" type="text" name="drugsize" value="${tDrug.drugsize}" ></td>
                    </tr>

                    <tr>
                        <td class="s1" >功效说明</td>
                        <td><input class="editbox" type="text" name="fexplain" value="${tDrug.fexplain}" ></td>
                    </tr>

                    <tr>
                        <td class="s1" >厂家</td>
                        <td><input class="editbox" type="text" name="merchant" value="${tDrug.merchant}" ></td>
                    </tr>

                    <tr>
                        <td class="s1" >价格</td>
                        <td><input class="editbox" type="text" name="price" value="${tDrug.price}" ></td>
                    </tr>


                    <tr>
                        <td colspan="2" style="text-align: center">
                            <input class="bluebuttoncss" type="submit" value="提交保存" >
                            <input class="whitebuttoncss" type="reset" value="取消返回" >
                        </td>
                    </tr>
                </table>

            </td>
        </tr>
        </tbody>
    </table>
</form>
</center>
<script  type="text/javascript" src="js/jquery_3.5.1.js"></script>
<script>
    $(function (){
        //当id为choicePhoto的按钮被点击，就触发了fileToUpload文件选择器的点击事件
        $("#choicePhoto").click(function (){
            alert("选择图片按钮被点击了");
            $("#fileToUpload").click();
        })

        $("#fileToUpload").change(function (){

            var files = $("#fileToUpload")[0].files;

            if(files.length<=0){
                return alert('请选择文件后再上传');
            }

            var formData = new FormData();
            formData.append("file",files[0]);
            alert("请求")
            alert(files[0].name)  //显示以下上传文件的名称
            $.ajax({  //使用ajax异步调用服务器中的url
                url:"upload.do",
                data:formData,
                cache:false,
                type:"post",
                datatype:"json",
                contentType:false, //不设置内容类型
                processData:false, //不处理数据
                success:function (data){
                    if(data.code==0) {  //当data.code==0的时候代表上传文件成功
                        alert(data.msg); //显示从服务器中发回来的消息提示
                        $("#photorul").val(data.result); //把上传后存储在服务器中的文件名称回填给文本框
                        //让img控件显示上传的图片文件，方法是修改sec的图片地址
                        $("#upload").attr("src","/upload/"+data.result)
                    }else{  //失败
                        alert(data.msg);
                    }
                }
            })
        })
    })
</script>
</body>
</html>
